<template>
  <div class="home-container">
    <!-- 统计充电桩概况 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>充电桩概况</span>
            </div>
          </template>
          <div class="card-content">
            <p>正在使用的充电桩：{{ inUseChargers }}/{{ totalChargers }}</p>
            <p>空闲的充电桩：{{ idleChargers }}/{{ totalChargers }}</p>
            <p>故障的充电桩：{{ faultyChargers }}/{{ totalChargers }}</p>
          </div>
        </el-card>
      </el-col>

      <!-- 交易状况 -->
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>交易状况</span>
            </div>
          </template>
          <div class="card-content">
            <p>总用户数：{{ totalUsers }}</p>
            <p>总消费金额：{{ totalSpending }} 元</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 地图组件 -->
    <div>
      <map-component />
    </div>
  </div>
</template>

<script setup>
import MapComponent from "./MapComponent.vue";
import { ref } from 'vue';

// 假数据，实际应用中应从API获取
const totalChargers = ref(100);
const inUseChargers = ref(25);
const idleChargers = ref(70);
const faultyChargers = ref(5);

const totalUsers = ref(50);
const totalSpending = ref(587.4); // 示例金额
</script>

<style scoped>

.box-card {
  height: 200px;
  text-align: center;
  font-size: 15px;
  background-color: #409EFF;
  color: #fff;
}
span {
  font-size: 20px;
  font-weight: bold;
}

</style>